import React from 'react'
import { withRouter } from 'react-router-dom'
import ManagementLayout from '../management-layout'
import { Icon, Menu, Pagination } from 'antd'
import ApplicationsBox from './applications-box'
import { connect } from 'react-redux'
import { getMySerialsApplications, handApplication } from '../../../actions/application'
const DEFAULT_PAGE = 1
class ApplicationsManagementBody extends React.Component {
  state = {
    currentTab: 'applying',
    currentPage: DEFAULT_PAGE
  }
  getStatus = currentTab => currentTab === 'applying' ? '申请中' :'待处理'
  componentDidMount = () => {
    const {currentTab} = this.state

    this.props.getMySerialsApplications(DEFAULT_PAGE,this.getStatus(currentTab))
  }

  handleClick = (e) => {
    this.setState({currentTab: e.key,currentPage:1},()=>{
      this.props.getMySerialsApplications(DEFAULT_PAGE,this.getStatus(this.state.currentTab))
    })
  }
  paginationChange = (current) => {
    const {currentTab} = this.state
    this.setState({current},()=>{
      this.props.getMySerialsApplications(current,this.getStatus(currentTab))
    })
  }
  handApplication = (id,status) => {
    const {currentTab} = this.state
    this.props.handApplication(id,status,()=>{
      this.props.getMySerialsApplications(DEFAULT_PAGE
        ,this.getStatus(currentTab))
    })
  }

  render () {
    const {currentTab,currentPage} = this.state
    const {serialsApplicationsPageable} = this.props
    return <ManagementLayout>
      <Menu
        onClick={this.handleClick}
        selectedKeys={[currentTab]}
        mode='horizontal'
        style={{marginBottom: 30}}
      >
        <Menu.Item key='applying'>
          <Icon type='notification'/>最新申请
        </Menu.Item>
        <Menu.Item key='handled'>
          <Icon type='inbox'/>已处理
        </Menu.Item>
      </Menu>
      <ApplicationsBox
        serialsApplicationsPageable={serialsApplicationsPageable}
        handApplication={this.handApplication}
        currentTab={currentTab}/>
      <Pagination defaultCurrent={currentPage}
                  total={serialsApplicationsPageable.totalElements}
                  hideOnSinglePage
                  defaultPageSize={10}
                  onChange={this.paginationChange}/>
    </ManagementLayout>
  }
}

const mapStateToProps = ({serialsApplicationsPageable}) => ({
  serialsApplicationsPageable
})
const mapDispatchToProps = dispatch => ({
  getMySerialsApplications: (current,status) => dispatch(getMySerialsApplications(current,status)),
  handApplication: (id,status,callback) => dispatch(handApplication(id,status,callback))
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(ApplicationsManagementBody))
